﻿@using CQIE.TES.Model
@using CQIE.TES.WEB.USER.Models

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <link href="~/Content/layui/css/layui.css" rel="stylesheet" />
    <link href="~/Content/css/StudyEva.css" rel="stylesheet" />
    <title>学生评教</title>
</head>

<body>


    <!-- 修改密码弹出层开始 -->
    <div style="display: none; padding: 20px;" id="saveOrUpdateDiv">
        <form class="layui-form" lay-filter="dataFrm" id="dataFrm" style="margin-top:20px">

            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label" style="width: 100px;">请输入新密码：</label>
                    <div class="layui-input-inline">
                        <input type="password" name="password" lay-verify="required" autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label" style="width: 100px;">请确认新密码：</label>
                    <div class="layui-input-inline">
                        <input type="password" name="password" lay-verify="required" autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
            </div>

            <div class="layui-form-item" style=" margin-top:30px">
                <div class="layui-input-block">
                    <button type="button"
                            class="layui-btn layui-btn-normal  layui-icon layui-icon-upload-circle"
                            lay-submit>
                        提交
                    </button>
                    <button type="reset"
                            class="layui-btn  layui-btn-warm layui-btn-primary layui-icon layui-icon-refresh">
                        重置
                    </button>
                </div>
            </div>
        </form>
    </div>
<!-- 修改密码弹出层结束 -->

    <!-- 头部 -->
    <div class="header"></div>
    <!-- 导航栏 -->
    <div class="nav">
        <div class="layui-tab">
            <ul class="layui-tab-title">
                <li class="layui-this">教师评教</li>
                <div id="name">
                    <ul class="layui-nav layui-layout-right">
                        <li class="layui-nav-item">
                            <a href="javascript:;" style="color: black;">
                                @ViewBag.UserName
                            </a>
                            <dl class="layui-nav-child">
                                <dd><button class="layui-btn layui-btn-sm layui-btn-primary" id="btn">修改密码</button></dd>

                            </dl>
                        </li>
                        <li class="layui-nav-item"><a href="/Login" style="color: black;">退出</a></li>
                    </ul>
                </div>
            </ul>

            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <select name="selectEva">
                        <option value="">选择评测</option>
                        @{
                            foreach (EvaluaHeight item in ViewBag.EvaList)
                            {
                                <option value="@item.ID">@item.Name</option>
                            }
                        }
                    </select>
                    <button onclick="MakeSure()">确定</button>

                    <ul class="nav_list courseNav" id="nav_list">
                    </ul>

                    <div class="box" id="box" style="display: none;">
                        <form class="layui-form" id="myform" lay-filter="myForm">
                            <!-- 显示课程 -->
                            <div id="con" style="text-align: center; padding: 10px;"><br><span></span></div>
                            @{
                                foreach (Question_Option item in ViewBag.Question)
                                {
                                    <div class="layui-form-item">
                                        <div class="question">
                                            @item.Info
                                        </div>
                                        <div>
                                            <ul class="que" id="que">
                                                @foreach (Option o in item.Options)
                                                {
                                                    <li>
                                                        <input type="radio" name="@(item.ID)" 
                                                               value="@o.Score" 
                                                               title="@o.Content">
                                                    </li>
                                                }
                                            </ul>
                                        </div>
                                    </div>
                                }
                            }

                            <div class="btn">
                                @*<button type="button" onclick="Save()" class="layui-btn layui-btn-normal layui-btn-radius">保存</button>*@
                                <button type="submit" lay-filter="doSubmit" lay-submit class="layui-btn layui-btn-warm layui-btn-radius">提交</button>
                            </div>
                        </form>
                    </div>
                </div>
                <!-- 评价结果 -->
                <div class="layui-tab-item">
                    <canvas id="bchart" height="400" width="600">教师评教结果统计</canvas>
                </div>
            </div>
        </div>
    </div>


    <script src="~/Content/layui/layui.js"></script>
    <script>
        sessionStorage.setItem("sid", @ViewBag.sid);
        var MakeSure;
        var init;
        var Submit;
        var Save;

        //注意：选项卡 依赖 element 模块，否则无法进行功能性操作
        layui.use(['element', 'jquery', 'form', 'layer', 'table'],
            function () {
                var element = layui.element;
                var $ = layui.jquery;
                var form = layui.form;
                var layer = layui.layer;
                var table = layui.table;

                $(document).on('click',
                    '#btn',
                    function () {
                        openAddUser();
                    });

                var url;
                var mainIndex;

                //打开添加页面
                function openAddUser() {
                    mainIndex = layer.open({
                        type: '1',
                        title: '修改密码',
                        content: $("#saveOrUpdateDiv"),
                        area: ['400', '350'],
                        success: function (index) {

                        }
                    });
                }

                Save = function () {
                    let res = form.val('myForm');
                };

                form.on("submit(doSubmit)",
                    function () {
                        let res = form.val('myForm');
                        
                        if (Object.keys(res).length !== 10) {
                            layer.msg("请完成所有评测", { icon: 2 });
                            return false;
                        }
                        let index = layer.load();
                        $.post('/api/eva/submit',
                            {
                                evaid: sessionStorage.getItem("evaid"),
                                teacherid: sessionStorage.getItem("teacherId"),
                                questionIds: Object.keys(res),
                                answerIds: Object.values(res),
                                courseId: sessionStorage.getItem("courseId"),
                                sid: sessionStorage.getItem("sid")
                            }, function() {
                                $.get('/api/eva/isrecorded',
                                    {
                                        evaid: sessionStorage.getItem("evaid"),
                                        teacherid: sessionStorage.getItem("teacherId"),
                                        courseId: sessionStorage.getItem("courseId"),
                                        sid: sessionStorage.getItem("sid")
                                    },
                                    function (res) {
                                        if (res != null) {
                                            // Is Array
                                            let obj = JSON.parse(res);
                                            let data = {}
                                            for (let i = 0; i < obj.length; i++) {
                                                data[obj[i].qid] = obj[i].aid;
                                            }
                                            form.val("myForm", data);
                                            $('.btn').css('display', 'none');
                                            form.render();
                                        } else {
                                            $('.btn').css('display', 'block');
                                            // 清空表单
                                            $('#myform')[0].reset();
                                        }
                                        layer.close(index);
                                        layer.msg("保存成功！", { icon: 1 });
                                    });
                            });

                        return false;
                    });


                init = function () {
                    //获取元素
                    var olab = document.getElementById("nav_list");
                    var oli = olab.getElementsByTagName("li");

                    var allInputs = document.querySelectorAll("input");


                    var ocon = document.getElementById("con");
                    for (var i = 0; i < oli.length; i++) {

                        //索引
                        oli[i].index = i;
                        //鼠标点击事件
                        oli[i].onclick = function () {
                            document.getElementById("box").style.display = "block";
                            form.render();
                            for (var i = 0; i < oli.length; i++) {
                                //将className清空
                                oli[i].className = "";
                                ocon.innerText = this.innerText;
                                sessionStorage.setItem('teacherId', $(this).val());
                                sessionStorage.setItem('courseId', $(this).attr('cid'));
                                //遍历所有的单选框，并将选中的单选框状态清空
                                for (var j = 0; j < allInputs.length; j++) {
                                    if (allInputs[j].checked) {
                                        allInputs[j].checked = false;
                                    }
                                }
                            }
                            // 判断是否已经完成
                            var index = layer.load();
                            $.get('/api/eva/isrecorded',
                                {
                                    evaid: sessionStorage.getItem("evaid"),
                                    teacherid: sessionStorage.getItem("teacherId"),
                                    courseId: sessionStorage.getItem("courseId"),
                                    sid: sessionStorage.getItem("sid")
                                },
                                function (res) {
                                    if (res != null) {
                                        // Is Array
                                        let obj = JSON.parse(res);
                                        let data = {}
                                        for (let i = 0; i < obj.length; i++) {
                                            data[obj[i].qid] = obj[i].aid;
                                        }
                                        form.val("myForm", data);
                                        $('.btn').css('display', 'none');
                                        form.render();
                                    } else {
                                        $('.btn').css('display', 'block');
                                        // 清空表单
                                        $('#myform')[0].reset();
                                    }
                                    layer.close(index);
                                });
                            //将className变成active
                            this.className = "active";
                        }
                    }
                }

                MakeSure = function () {
                    let evaid = $("[name='selectEva']").val();
                    if (evaid == '') {
                        return;
                    }
                    // 确定评教名字的时候隐藏表单、清空表单数据
                    $('#box').css('display', 'none');
                    $('#myform')[0].reset();
                    sessionStorage.setItem("evaid", evaid);
                    var index = layer.load();
                    $.get('/api/course/getcourse',
                        { studentId: sessionStorage.getItem("sid"), evaId: evaid },
                        function (res) {
                            let nav = $('.courseNav');
                            nav.empty();
                            res.forEach(r => {
                                nav.append(
                                    `<li value="${r.teacherId}" cid="${r.id}"><a href="javascript:;">${r.name}<br><span>【${r
                                        .teacherName
                                    }】</span></a></li>`);
                            });
                            init();
                            layer.close(index);
                        });
                }
                window.onload = init();

            });

    </script>

</body>

</html>
